<template>
	<view class="content">
		<view class="top">
			<view class="row" @click="newFriend">
				<view class="row_logo">
					<image src="../../../static/newFriend.png" mode=""></image>
					<view class="badge" v-if="applyCount!=0">{{applyCount}}</view>
				</view>
				<view class="row_right">
					<text>新的朋友</text>
				</view>
			</view>
			
			<view class="row">
				<view class="row_logo">
					<image src="../../../static/manytalk.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>群聊</text>
				</view>
			</view>
			
			<view class="row">
				<view class="row_logo">
					<image src="../../../static/label.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>标签</text>
				</view>
			</view>
			
			<view class="row">
				<view class="row_logo">
					<image src="../../../static/gzh.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>公众号</text>
				</view>
			</view>
		</view>
		
		<!-- <view class="qiye-box qu" v-if="qiyes.length > 0">
			<view class="tip">
				<text>我的企业</text>
			</view>
			<view class="qiyes">
				<view class="row" v-for="qiye in qiyes">
					<view class="row_logo">
						<image :src="qiye.src"></image>
					</view>
					<view class="row_right">
						<text>{{qiye.name}}</text>
					</view>
				</view>
			</view>
			
		</view> -->
		
		<view class="star-box qu" v-if="stars.length > 0">
			<view class="tip">
				<text>星标朋友</text>
			</view>
			<view class="stars">
				<view class="row" v-for="star in stars">
					<view class="row_logo">
						<image :src="star.src"></image>
					</view>
					<view class="row_right">
						<text>{{star.name}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view  class="qu" v-for="qu in friends">
			<view class="tip">
				<text>{{qu.title}}</text>
			</view>
			<view @click="gotoPage(friend)" class="friends row" v-for="friend in qu.children">
				<view class="row_logo">
					<image :src="friend.uri"></image>
				</view>
				<view class="row_right">
					<text>{{friend.name}}</text>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;margin-top: 20rpx;">共{{total}}个朋友</view>
	
	</view>
</template>

<script>
		import http from '../../../common/request.js'
	export default {
		onLoad() {
		       this.getMyFriends()
		   },
		   onShow() {
		           this.getMyFriends();
				   this.getApplyCount()
		      },
		data() {
			return {
				total:0,
				qiyes:[],
				stars:[],
				friends:[],
				applyCount:0
			}
		},
		methods: {
			gotoPage(item){
							uni.navigateTo({
								url:"/pages/index/chat/talk/talk?id="+item.id+'&name='+item.name
							})
						},
			newFriend(){
							uni.navigateTo({
								url:'./new_friend'
							})
						},
			onNavigationBarButtonTap:function(e){
				             console.log(e.title)
							if('add'===e.title){
								uni.navigateTo({
									url:'./add_friend'
								})
							}
						},
			async getMyFriends() {
					const res = await http.request({
						url: '/sys_user/get_my_friends',
						method:'POST',
						data:{}
					})
				if(res.data.code==0){
					  this.total =0
					 this.friends = res.data.data
					  for (let i = 0; i < this.friends.length; i++) {
					  	   this.total += this.friends[i].children.length
					  }
				}
				
			},
			
			async getApplyCount() {
					const res = await http.request({
						url: '/sys_user/count_apply_friends',
						method:'POST',
						data:{}
					})
				if(res.data.code==0){
					 this.applyCount = res.data.data
					 
				}
				
			},
			
			
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #EEEEEE;
	}
	.row{
		background: white;
		display: flex;
		width: 100%;
		height: 50px;
		.row_logo{
			width: 18%;
			display: flex;
			align-items: center;
			image{
				width: 38px;
				height: 38px;
				margin: auto;
				border-radius: 5px;
			}
		}
		.row_right{
			height: 100%;
			width: 84%;
			display: flex;
			align-items: center;
			border:{
				bottom:1px solid #DDDDDD;
			}
			text{
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}
			
		}
		
		
		
	}
	.row:last-child{
		.row_right{
			border: 0;
		}
	}

	.qu{
		.tip{
			margin: 10px 0;
			font-size: 14px;
			font-family: 'syht';
			text{
				margin-left: 13px;
			}
		}
	}
	.badge {
		position: absolute;
		width: 4vw;
		height: 4vw;
		background-color: #ec6d2c;
		top: 1;
		right: 0;
		border-radius: 100%;
		font-size: 20upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		margin-right: 30rpx;
	}
</style>

